<template>
  <div class="adress">
    <div>商品名称：{{ data.brand }}</div>
    <div>价格：{{ data.sales }}元</div>
    <div>剩余数量：{{ data.stock }}</div>
    
     <van-field v-model="fieldValue" is-link readonly label="地区" placeholder="请选择所在地区" @click="show = true" />
        <van-popup v-model:show="show" round position="bottom">
            <van-cascader v-model="cascaderValue" title="请选择所在地区" :options="options" @close="show = false"
                @finish="onFinish" />
        </van-popup>

  </div>
</template>

<script>
export default {
  props: ["data"],
  data() {
    return {
      fieldValue:"",
        show: false,
            options: [
                {
                    text: '浙江省',
                    value: '330000',
                    children: [{ text: '杭州市', value: '330100' }],
                },
                {
                    text: '江苏省',
                    value: '320000',
                    children: [{ text: '南京市', value: '320100' }],
                },
            ],
            cascaderValue: ""
        }
    },
    methods: {
        onFinish({ selectedOptions }) {
            this.show = false;
            this.fieldValue = selectedOptions.map((option) => option.text).join('/');

        },
      },
  components: {},
};
</script>

<style scoped>
.adress {
  background-color: lightgoldenrodyellow;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

</style>
